<template>
  <main>
    <el-row>
      <el-col :span="18">
        <el-input
          v-model="text"
          placeholder="输入文本可生成二维码"
          :rows="13"
          type="textarea"
        ></el-input>
      </el-col>
      <el-col :span="4">
        <lay-qrcode :text="text" :width="270"></lay-qrcode>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="18">
        <el-upload
          class="avatar-uploader"
          :show-file-list="false"
          action="#"
          :before-upload="beforeAvatarUpload"
          accept=""
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <lay-icon v-else type="layui-icon-upload-drag" size="24px"></lay-icon> &nbsp;
        </el-upload>
      </el-col>
      <el-col :span="5">
        <el-input
          style="margin: 8px 10px"
          v-model="textarea"
          :rows="8"
          type="textarea"
          placeholder="解析二维码"
        />
      </el-col>
    </el-row>

    <div class="paste" @paste.native="pasteMe($event)" style="padding: 100px">
      粘贴区域
    </div>
    <canvas id="myCanvas" width="600" height="600" style="display: none"></canvas>
  </main>
</template>
<script>
import jsqr from "jsqr";
import service from "../../common/api.js";
var res;
export default {
  data() {
    return {
      text: "",
      textarea: "",
      imageUrl: "",
    };
  },

  created() {
    Object.assign(this, { service });
  },
  methods: {
    async pasteMe() { 
      res = await service.get("img/api/img", {});
      res = await this.analysisQrcode(this.dataURLtoFile(res.src,'name'));
      this.textarea = res.isqrcode ? res.qrcode.data : "未能识别二维码";
    },

    // 原文链接：https://blog.csdn.net/YS_bigPang/article/details/114630508
    async beforeAvatarUpload(file) {
      res = await this.analysisQrcode(file);
      this.textarea = res.isqrcode ? res.qrcode.data : "未能识别二维码";
    },
    // 解析二维码
    analysisQrcode(file) {
      var th = this;
      return new Promise((resolve) => {
        var img = new Image();
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (e) {
          img.src = th.imageUrl = e.target.result;
          var myCanvaswd = document.getElementById("myCanvas").getContext("2d");
          img.onload = function () {
            myCanvaswd.drawImage(img, 0, 0, 600, 600);
            var imageData = myCanvaswd.getImageData(0, 0, 600, 600);
            let data = { qrcode: "", isqrcode: true };
            data.qrcode = jsqr(imageData.data, imageData.width, imageData.height, {
              inversionAttempts: "dontInvert",
            });
            if (data.qrcode == null) data.isqrcode = false;
            resolve(data);
          };
        };
      });
    },
    dataURLtoFile(dataurl, filename) {
      var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, { type: mime });
    },
  },
};
</script>
<style scoped>
.paste,
.el-upload {
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 1px solid #eee;
  margin: 5px;
}
</style>
